<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-button size="large" plain @click="showEdit('add')"
        >新增分类</el-button
      >
    </div>
    <Table
      :columns="columns"
      :showPagination="true"
      :dataSource="tableData"
      :fetch="loadDataList"
      :options="tableOptinos"
    >
      <!-- 封面 -->
      <template #cover="{ row }">
        <Cover :cover="row.cover"></Cover>
      </template>
      <template #operation="{ index, row }" v-if="userInfo.roleType == 1">
        <a
          href="javascript:void(0)"
          class="a-link"
          @click="showEdit('update', row)"
          >修改</a
        >
        <el-divider direction="vertical" />
        <a href="javascript:void(0)" class="a-link" @click="del(row)">删除</a>
        <el-divider direction="vertical" />
        <a
          href="javascript:void(0)"
          :class="index == 0 ? 'not-allow' : 'a-link'"
          @click="changeSort(index, 'up')"
          >上移</a
        >
        <el-divider direction="vertical" />
        <a
          href="javascript:void(0)"
          :class="index == tableData.list.length - 1 ? 'not-allow' : 'a-link'"
          @click="changeSort(index, 'down')"
          >下移</a
        >
      </template>
    </Table>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      @close="dialogConfig.show = false"
    >
      <el-form
        ref="formDataRef"
        :model="formData"
        :rules="rules"
        label-width="60px"
      >
        <el-form-item label="名称" prop="categoryName">
          <el-input
            placeholder="起一个好听的名字"
            v-model="formData.categoryName"
            size="large"
            ><template #prefix
              ><span class="iconfont icon-title"></span></template
          ></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="cover">
          <CoverUpload v-model="formData.cover"></CoverUpload>
        </el-form-item>
        <el-form-item label="简介" prop="categoryDesc">
          <el-input
            placeholder="这里写简介"
            v-model="formData.categoryDesc"
            size="large"
            type="textarea"
            :autosize="{ minRows: 4, maxRow: 4 }"
            ><template #prefix
              ><span class="iconfont icon-jianjie"></span></template
          ></el-input>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, reactive, ref } from "vue";
import CoverUpload from "../../components/CoverUpload.vue";
import VueCookies from "vue-cookies";
import { dataType } from "element-plus/es/components/table-v2/src/common.mjs";
const { proxy } = getCurrentInstance();

const userInfo = ref(VueCookies.get("userInfo") || {});

const api = {
  loadDataList: "/category/loadAllCategory4Blog",
  saveCategory: "/category/saveCategory4Blog",
  deleteCategory: "/category/delCategory4Blog",
  changeSort: "/category/changeCategorySort4Blog",
};

const columns = [
  {
    label: "封面",
    prop: "cover",
    width: 100,
    scopedSlots: "cover",
  },
  {
    label: "名称",
    prop: "categoryName",
    width: 200,
  },
  {
    label: "简介",
    prop: "categoryDesc",
  },
  {
    label: "博客数量",
    prop: "blogCount",
    width: 100,
  },
  {
    label: "操作",
    prop: "operation",
    width: 200,
    scopedSlots: "operation",
  },
];

const tableData = reactive({});
const tableOptinos = {
  extHeight: 10,
};

const loadDataList = async () => {
  let result = await proxy.Request({
    url: api.loadDataList,
  });
  if (!result) {
    return;
  }
  tableData.list = result.data;
};

//新增,修改
const dialogConfig = reactive({
  show: false,
  title: "标题",

  buttons: [
    {
      type: "primary",
      text: "确定",
      click: (e) => {
        submitForm();
      },
    },
  ],
});

const formData = ref({});
const rules = {
  categoryName: [{ required: true, message: "请输入分类名称" }],
};
const formDataRef = ref();

const showEdit = (type, data) => {
  dialogConfig.show = true;
  nextTick(() => {
    formDataRef.value.resetFields();
    if (type == "add") {
      dialogConfig.title = "新增分类";
      formData.value = {};
    } else if (type == "update") {
      dialogConfig.title = "编辑分类";
      // Object.assign(formData, data);
      formData.value = JSON.parse(JSON.stringify(data));
    }
  });
};

const submitForm = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }

    let params = {};
    Object.assign(params, formData.value);
    let result = await proxy.Request({
      url: api.saveCategory,
      params,
    });
    if (!result) {
      return;
    }

    dialogConfig.show = false;
    proxy.Message.success("保存成功");
    loadDataList();
  });
};

//删除
const del = (data) => {
  proxy.Confirm(`你确定要删除 <b>${data.categoryName}</b> 吗?`, async () => {
    let result = await proxy.Request({
      url: api.deleteCategory,
      params: {
        categoryId: data.categoryId,
      },
    });
    if (!result) {
      return;
    }
    loadDataList();
  });
};

//移动
const changeSort = async (index, type) => {
  let categoryList = tableData.list;
  if (
    (type === "down" && index === categoryList.length - 1) ||
    (type === "up" && index === 0)
  ) {
    return;
  }
  let number = type == "down" ? 1 : -1;
  let temp = categoryList[index];
  categoryList.splice(index, 1);
  categoryList.splice(index + number, 0, temp);

  let result = await proxy.Request({
    url: api.changeSort,
    dataType: "json",
    params: categoryList,
  });
};
</script>

<style scoped lang="scss">
el-button {
  border-radius: 0;
}
</style>